<template>
  <div class="big">
    <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>考勤报表</el-breadcrumb-item>
    <el-breadcrumb-item>考勤记录</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="record">
    <div class="block">
     &emsp; <span>查询：</span> 
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="请选择查询日期"
        format="YYYY/MM/DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    <div class="an"> <el-button type="primary" @click="find()"> 查询</el-button></div>
 
<div class="an"> <el-button @click="exportexcel" type="primary">导出</el-button></div>
   
  </div>

  <div class="table">
    <div class="biao"> <span>考勤记录</span></div>
  <el-table id="out-table" :data="tableData" size="large " border style="width: 100%" fit>
    <el-table-column prop="name" label="姓名" width="180"/>
    <el-table-column prop="department" label="部门" width="180" />
    <el-table-column prop="check" label="考勤组" />
    <el-table-column prop="date" label="考勤日期" />

    <el-table-column label="签到">
    <el-table-column prop="state" label="打卡结果" />
    <el-table-column prop="hour" label="签到时间" />
    </el-table-column>
    <el-table-column label="签退">
    <el-table-column prop="gostate" label="签到结果" />
    <el-table-column prop="gohour" label="签退时间" />
    </el-table-column>
    <el-table-column prop="location" label="签到地点" />
  </el-table>

  </div>
  </div> 
</template>

<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import * as service from '@/api/wenbo/wenbo'
import { ref,onMounted } from 'vue'
import * as XLSX from 'xlsx'
import fs from 'file-saver'


let tableData = ref([])
const value1 = ref('')

let find = async() => {
  console.log(value1.value);
  let res = await service.record({date_like:value1.value})
  tableData.value = res.data
}

onMounted( async ()=>{
  let res = await service.record()
  console.log(res);
  tableData.value = res.data
})

var exportexcel = ()=>{
  excelExport( document.querySelector('#out-table'),'myexcel' )
}


var excelExport = (table, filename) => {
  // workbook,
  const wb = XLSX.utils.table_to_book(table)
  console.log(wb);

  /* Export to file (start a download) */
  const defaultCellStyle = {
    font: { name: 'Verdana', sz: 13, color: 'FF00FF88' },
    fill: { fgColor: { rgb: 'FFFFAA00' } },
  }
  const wopts = {
    bookType: 'xlsx',
    bookSST: false,
    type: 'binary',
    cellStyle: true,
    defaultCellStyle: defaultCellStyle,
    showGridLines: false,
  }
  const wbout = XLSX.write(wb, wopts)
  const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' })
  fs.saveAs(blob, filename+'.xlsx')
}
var s2ab = (s) => {
  if (typeof ArrayBuffer !== 'undefined') {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i !== s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  } else {
    const buf = new Array(s.length);
    for (let i = 0; i !== s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
}
</script >

<style lang="scss" scoped>
.big{
  width: 100%;
}
.record{
  width: 90%;
  height: 80px;
  background: #eee;
  margin:20px auto;
  display: flex;
  align-items: center;
  .an{
    margin-left: 20px;
  }
  
}
.table{
  width: 95%;
  height: 100%;
  margin: 0 auto;
  .biao{
    width: 100%;
    height: 60px;
    background: #eee;
    margin: 20px auto;
    font-size: 20px;
    line-height: 60px;
    text-indent: 30px
  }
}









.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>